<template>
    <div class="iot-video-blk">
        <div class="iot-video-hd">
            <h4 class="flex-1">{{videoItem.name}}</h4>
            <a href="javascript:;" class="mode-btn" @click="switchMode" v-if="isLive">观看回放</a>
            <a href="javascript:;" class="mode-btn" @click="switchMode" v-else>观看直播</a>
            <a href="javascript:;" class=" ml-10" @click="maxScreen">
                <i class="iconfont icon-one"></i>
            </a>
            <a class="active ml-10" href="javascript:;" @click="closeScreen">
                <i class="iconfont icon-close"></i>
            </a>
        </div>
        <div class="video-blk">
            <livePlayer ref="livePlayer" crossOrigin="anonymous" :options="playerOptions" @ready="playerReady" v-if="playerOptions && isLive" />
            <template v-if="!isLive">
                <Playback ref="playback" :src="playbackUrl" v-if="playbackUrl" />
                <div class="no-data" v-else>暂无视频数据</div>
            </template>
            
        </div>
        <!-- 选择时间 start -->
		<el-dialog
            v-if="playbackTimeModalVisible"
            class="contact-dialog"
            title="选择回放时间段"
            :visible.sync="playbackTimeModalVisible"
            :width="550*scale+'px'"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
			<el-form :inline="true" class="filter-blk flex-1">
				<el-form-item>
					<el-date-picker
						v-model="timeRange"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						value-format="yyyy-MM-dd HH:mm:ss"
						format="yyyy-MM-dd HH:mm:ss"
						:clearable="false">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="confirmTime">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 选择时间 end -->
        
    </div>
</template>
<script>
import { mapState } from 'vuex'
import livePlayer from './LiveVideoPlayer'
import Playback from '@/components/device/VideoItem.vue'
export default {
    components: {
        livePlayer,
        Playback
    },
    props: {
        videoItem:{
            type: Object,
            default: {}
        },
    },
	computed: {
		...mapState([
			'scale'
		]),
	},
    data () {
        return {
            isLive: true,
            playerOptions: null,
			timeRange:[],
			playbackTimeModalVisible: false,
            beginTime: '',
            endTime: '',
            playbackUrl: ''
        }
    },
    watch: {
        "videoItem.id" () {
            this.playerOptions = null
            this.init()
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        async confirmTime () {
			if(this.timeRange.length==0){
				this.$message.error('请选择起始时间')
				return
			}
			this.beginTime = this.timeRange[0]
			this.endTime = this.timeRange[1]
			this.playbackTimeModalVisible  = false
            this.openFullLoading()
            let res = await this.getPlayBack(this.videoItem.number)
            this.closeFullLoading()
            this.playbackUrl = res.data
            this.isLive = false
		},
        async init () {
            let liveUrl = ''
            let videoItem = this.videoItem
            if(!videoItem.videoplayAdds || videoItem.videoplayAdds.length==0){
                let liveVideo = await this.getLiveUrl(videoItem.number)
                liveUrl = liveVideo.data
            }else{
                liveUrl = videoItem.videoplayAdds[0].path
            }
            let options = {
                sources:[liveUrl]
            }
            this.playerOptions = options
            this.$nextTick(()=>{
                this.$refs.livePlayer.render()
            })
        },
        getLiveUrl (number) {
            return this.$get('/fireFightingIOT/device/getLiveStream',{number,protocol:'hls'})
        },
        getPlayBack (number) {
            return this.$get('/fireFightingIOT/device/getPlaybackStream',{number,beginTime:this.beginTime,endTime: this.endTime})
        },
        switchMode () {
            if(this.isLive){
                this.playbackTimeModalVisible = true
                return
            }
            this.isLive = !this.isLive
        },
        closeScreen () {
            this.$emit('close')
        },
        maxScreen () {
            this.$emit('max')
        },
        playerReady () {},
    },
}
</script>